<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>内置的关系</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 
            实例对象的隐式原型永远指向——>他的缔造者的原型对象*
            1.一个重要的内置关系：VueComponent.prototype.__proto__===Vue.prototype
            2.为什么要有这个关系：让组件实例对象（vc）可以访问到Vue原型上的属性、方法


            Vue是一个构造函数，有显式原型prototype       指向了Vue的原型对象
            Vue的实例对象vm,有隐式原型__proto__         指向了Vue的原型对象
            Vue的原型对象，有隐式原型__proto__          指向了Object的原型对象
            Object的原型对象，有隐式原型__protp__       指向了原型链的尽头，就是null


            VueComponent一个构造函数，有显式原型prototype        指向了VueComponent的原型对象
            VueComponent的实例对象（vc），有隐式原型__proto__    指向了VueComponent的原型对象
            VueComponent的原型对象，有隐式原型__proto__          
                VueComponent的原型对象的隐式原型属性，本来应该指向Object的原型对象，但是Vue做了一件重要的事情，就是让他指向了Vue原型对象
            
            
    -->
    <div id="root"></div>
  </body>
  <script>
    // 一、回忆原型内容
    // 定义一个构造函数
    function Demo() {
      this.a = 1
      this.b = 2
    }
    // 创建一个Demo的实例对象
    const d = new Demo()
    console.log(Demo.prototype) //构造函数上的显示原型属性
    console.log(d.__proto__) //实例对象上的隐式原型属性(前后都是两个下划线)
    console.log('验证显示和隐式是是一个对象', Demo.prototype === d.__proto__)
    /*
        无论构造函数上的显示原型属性，还是实例对象上的隐式原型属性，他们都指向了一个对象————原型对象
        程序员通过显示原型属性操作原型对象，追加一个x属性，值为99（虽然都执行原型对象，一般我们通过显示原型来添加属性，底层程序执行时会从隐式原型属性中去找）
    */

    Demo.prototype.x = 99
    console.log(d.__proto__.x)
    /*
        我们如果这么拿属性，是不是太复杂了，还得带着__proto__双下划线，分明就是不想让你这个么拿属性
        所以人家开发的时候就不然你这么拿，直接就是（实例对象.属性）
    */
    console.log(d.x)

    /*
       二、验证Vue和VueComponent的关系（一个重要的内置关系）
        VueComponent.prototype.__proto__ === Vue.prototype
    */
    // school组件VueComponent的实例对象
    const school = Vue.extend({
      data() {
        return {
          name: '太原科技大学',
          address: '北京市昌平区',
        }
      },
      template: `
        <div>
            <h2>学校名称：{{name}}</h2>
            <h2>地址：{{address}}</h2>
        </div>
      `,
    })
    console.log('创建的组件是什么?', school) //是一个构造函数VueComponent
    // Vue创建的vm实例对象
    new Vue({
      el: '#root',
    })
    console.log(school.prototype.__proto__ === Vue.prototype) //答案是true
  </script>
</html>
